<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link type="text/css" rel="stylesheet" href="/static/css/style.css" >
<script src="/static/script/jquery-1.7.2.js"></script>
<script>
	$(function(){
		//绑定单击事件，单击弹窗，确认继续
		$("#emptyCart").click(function(){
			return confirm("是否确定清空购物车");
		});
		$(".deleteCartItem").click(function(){
			//获取图书名字，方便在弹窗显示
			var title = $(this).attr("id");
			return confirm("确定要将【"+title+"】这本图书移出购物车吗？");
		});
		$(".updateCartItem").change(function(){
			var bookId = $(this).attr("id");
			var bookCount = $(this).val();
			//发送请求的url，这个就是传参，不是ajax
			location = "/updateCartItem?bookId="+bookId+"&bookCount="+bookCount;
			//下面这个才是ajax
			// //设置请求的url
			// var url = "/updateCartItem";
			// //设置请求参数
			// var params = {"cartItemId":cartItemId,"bookCount":bookCount};
			// //获取显示购物项中的金额小计的td元素，大致意思就是当前元素的副的下一个元素的下一个元素取出来
			// var $tdEle = $(this).parent().next().next();
			// //发送Ajax请求
			// $.post(url,params,function(res){
			// 	//设置总数量
			// 	$("#totalCount").text(res.TotalCount);
			// 	//设置总金额
			// 	$("#totalAmount").text(res.TotalAmount);
			// 	//设置金额小计
			// 	$tdEle.text(res.Amount);
			// },"json");

		});
	});
</script>
</head>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="/static/img/logo.gif" >
			<span class="wel_word">购物车</span>
			{{if .UserID}}
			<div>
				<span>欢迎<span class="um_span">{{.UserName}}</span>光临书城</span>
				<a href="/getCartInfo">购物车</a>
				<a href="/logout">注销</a>&nbsp;&nbsp;
				<a href="/main">返回</a>
			</div>
			{{else}}
			<div>
				<a href="/pages/user/login.html">登录</a> | 
				<a href="/pages/user/regist.html">注册</a> &nbsp;&nbsp;
				<a href="/getCartInfo">购物车</a>
				<a href="/pages/manager/manager.html">后台管理</a>
			</div>
			{{end}}
	</div>
	
	<div id="main">
	
		<table>
			<tr>
				<td>商品名称</td>
				<td>数量</td>
				<td>单价</td>
				<td>金额</td>
				<td>操作</td>
			</tr>		
			{{range .CartItems}}
			<tr>
				<td>{{.Book.Title}}</td>
				<td>
					<input id="{{.Book.ID}}" class="updateCartItem" type="text" value="{{.Count}}" style="text-align:center;width: 50px;"/>
				</td>
				<td>{{.Book.Price}}</td>
				<td>{{.Amount}}</td>
				<td><a id="{{.Book.Title}}" class="deleteCartItem" href="/deleteCartItem?cartItemId={{.CartItemID}}">删除</a></td>
			</tr>	
			{{end}}
			
			
		</table>
		
		<div class="cart_info">
			<span class="cart_span">购物车中共有<span class="b_count">{{.TotalCount}}</span>件商品</span>
			<span class="cart_span">总金额<span class="b_price">{{.TotalAmount}}</span>元</span>
			<span class="cart_span"><a href="/deleteCart" id="emptyCart">清空购物车</a></span>
			<span class="cart_span"><a href="/checkout">去结账</a></span>
		</div>
	
	</div>
	
	<div id="bottom">
		<span>
			书城.Copyright &copy;2015
		</span>
	</div>
</body>
</html>